Skip to content

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Nov 4, 2025

Contributes to #5835


Thanks for submitting a PR! Please check the boxes below:

  • I have added information to docs/ if required so people know about the feature!
  • I have filled in the "Changes" section below?
  • I have filled in the "How did you test this code" section below?
  • I have used a Conventional Commit title for this Pull Request

Changes

image image image image

Please describe.

How did you test this code?

Please describe.


Note

Adds multi-select for environment names (IN) and single-select (EQUAL/NOT_EQUAL) in segment rules, with cached condition values and minor UI/style tweaks.

  • Segments: Rules
    • Input types: RuleConditionValueInput now uses MultiSelect for IN on $.environment.name and EnvironmentSelectDropdown for EQUAL/NOT_EQUAL; loads environment options via useGetEnvironmentsQuery and parses arrays with safeParseArray.
    • State handling: Introduces useConditionCache to cache/restore condition values when changing operator/property; integrated into Rule.tsx.
    • Hooks: Adds useConditionInputType and exports via hooks/index.ts; simplifies useRuleContext (removes env dropdown logic).
    • UI: Refactors RuleConditionRow layout (grid classes), passes property to value input.
  • Components
    • MultiSelect: Styling/behavior tweaks (24px chip height, w-100, smaller gaps, conditional components, className handling).
    • Select wrapper: Preserves className on container.
  • Modals
    • CreateSegmentRulesTabForm, CreateSegment, CreateSegmentUsersTabContent, AssociatedSegmentOverrides: Layout adjustments (responsive columns, col-4 env selects) and spacing tweaks.
  • Styles
    • react-select: Use min-height for control; extensible value container unchanged; segment rule select width set to 100%.

Written by Cursor Bugbot for commit 006eb98. This will update automatically on new commits. Configure here.

@vercel
Copy link

vercel bot commented Nov 4, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview Comment Nov 6, 2025 0:25am
flagsmith-frontend-staging Ready Ready Preview Comment Nov 6, 2025 0:25am
1 Skipped Deployment
Project Deployment Preview Comments Updated (UTC)
docs Ignored Ignored Preview Nov 6, 2025 0:25am


render() {
const props = this.props
const { className, ...props } = this.props
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We had an issue in here, className was being applied for the container and also for the Select component, passed as {...props}. Now I am extracting it to apply only for the container, that in my view was the goal in here.

@talissoncosta talissoncosta force-pushed the feat/multi-select-dropdown branch from 2524b8d to f76b9fc Compare November 5, 2025 23:02
@talissoncosta
Copy link
Contributor Author

You were right, @kyle-ssg I got it working with react-select by keeping the tags approach and preventing the input height from growing.
image

and it looks way better now.

- Fix bug when change from IS_SET or IS_NOT_SET to Modulo, it was breaking the page
@github-actions github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 5, 2025
@github-actions github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 5, 2025
}
place='top'
effect='solid'
<div className={`relative ${className}`}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Handle Undefined ClassName in Template Literal

When className prop is undefined, the template literal className={\relative ${className}`}will result in the CSS class "relative undefined" (with the literal string "undefined"). This should use conditional logic likeclassName={className ? `relative ${className}` : 'relative'}orclassName={`relative ${className || ''}`}` to avoid adding "undefined" as a CSS class.

Fix in Cursor Fix in Web

@talissoncosta talissoncosta force-pushed the feat/multi-select-dropdown branch from d000946 to 1af4e3e Compare November 6, 2025 00:23
@github-actions github-actions bot added feature New feature or request and removed feature New feature or request labels Nov 6, 2025
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Runtime error with undefined updates.value during split

Potential runtime error when changing to PERCENTAGE_SPLIT operator. If updates.value is undefined (when no prior conditions set it) or null (when hideValue was true), the expression updates.value?.toString().split(':')[0] will fail. The optional chaining updates.value?.toString() returns undefined when updates.value is null/undefined, and then calling .split(':') on undefined throws a TypeError. The code should check if updates.value exists before calling split, or handle the undefined case explicitly.

frontend/web/components/segments/Rule/Rule.tsx#L116-L117

Fix in Cursor Fix in Web


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants